/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import {
  AppBar,
  Tabs,
  Tab,
  Card,
  Typography,
  CardHeader,
  Avatar,
  makeStyles,
  Box,
  Button,
} from '@material-ui/core';
import ThumbUpAltIcon from '@material-ui/icons/ThumbUpAlt';
import VisibilityIcon from '@material-ui/icons/Visibility';
import { useHistory } from 'react-router-dom';
import { logout } from '../../store/actions';

import ArticleList from './components/ArticleList';
import {
  getDraft, getPosts, getReview, getFavorited,
} from '../../api/actions/article';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  achievement: {
    width: '100%',
    padding: theme.spacing(2),
  },
  achievementItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
  },
  achievementIcon: {
    marginRight: '6px',
  },
  attention: {
    marginTop: theme.spacing(2),
    display: 'flex',
    alignItems: 'center',
  },
  attentionItem: {
    flex: 1,
    height: 100,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatar: {},
  appBar: {
    marginTop: theme.spacing(2),
  },
  container: {
    display: 'flex',
  },
  leftContainer: {
    flex: 3,
  },
  rightContainer: {
    flex: 1,
    marginLeft: theme.spacing(2),
  },
  action: {
    margin: 0,
    alignSelf: 'center',
  },
}));

function TabPanel(props) {
  const {
    children, value, index, ...other
  } = props;

  return <div {...other}>{value === index && <div>{children}</div>}</div>;
}

const User = (props) => {
  const { user, userLogout } = props;
  const history = useHistory();
  const [tab, setTab] = useState(0);

  const [favorited, setFavorited] = useState([]);
  const [draft, setDraft] = useState([]);
  const [posts, setPosts] = useState([]);
  const [review, setReview] = useState([]);

  const classes = useStyles();

  const handleChange = (event, newValue) => {
    setTab(newValue);
  };

  const handleLogout = () => {
    userLogout();
    history.push('/');
  };

  useEffect(() => {
    let fetchData;
    switch (tab) {
      case 0:
        fetchData = async () => {
          const res = await getFavorited();
          if (res.code === 0) {
            setFavorited(res.data);
          }
        };
        fetchData();
        break;
      case 1:
        fetchData = async () => {
          const res = await getPosts();
          if (res.code === 0) {
            setPosts(res.data);
          }
        };
        fetchData();
        break;
      case 2:
        fetchData = async () => {
          const res = await getDraft();
          if (res.code === 0) {
            setDraft(res.data);
          }
        };
        fetchData();
        break;
      case 3:
        fetchData = async () => {
          const res = await getReview();
          if (res.code === 0) {
            setReview(res.data);
          }
        };
        fetchData();
        break;
      default:
        break;
    }
  }, [tab]);

  return (
    <Box className={classes.container}>
      <Box className={classes.leftContainer}>
        <Card className={classes.root}>
          <CardHeader
            classes={{
              action: classes.action,
            }}
            avatar={(
              <Avatar aria-label="recipe" className={classes.avatar}>
                {user && user.name.slice(0, 1)}
              </Avatar>
            )}
            title={user && user.name}
            action={(<Button size="small" variant="contained" color="secondary" onClick={handleLogout}>退出登录</Button>)}
          />
        </Card>
        <AppBar position="static" className={classes.appBar}>
          <Tabs value={tab} onChange={handleChange}>
            <Tab label="收藏" />
            <Tab label="文章" />
            <Tab label="草稿" />
            <Tab label="审核中" />
          </Tabs>
        </AppBar>
        <TabPanel value={tab} index={0}>
          <ArticleList posts={favorited} type="favorited" />
        </TabPanel>
        <TabPanel value={tab} index={1}>
          <ArticleList posts={posts} type="articles" />
        </TabPanel>
        <TabPanel value={tab} index={2}>
          <ArticleList posts={draft} type="draft" />
        </TabPanel>
        <TabPanel value={tab} index={3}>
          <ArticleList posts={review} type="articles" />
        </TabPanel>
      </Box>
      <Box className={classes.rightContainer}>
        <Card className={classes.achievement}>
          <Typography variant="h6">个人成就</Typography>
          <Box>
            <Box className={classes.achievementItem}>
              <ThumbUpAltIcon
                className={classes.achievementIcon}
                color="primary"
              />
              获得点赞:12
            </Box>
            <Box className={classes.achievementItem}>
              <VisibilityIcon
                className={classes.achievementIcon}
                color="primary"
              />
              文章被阅读:18
            </Box>
          </Box>
        </Card>
        <Card className={classes.attention}>
          <Box className={classes.attentionItem}>
            <Typography variant="body1">关注了</Typography>
            <Typography variant="body1">0</Typography>
          </Box>
          <Box className={classes.attentionItem}>
            <Typography variant="body1">关注者</Typography>
            <Typography variant="body1">0</Typography>
          </Box>
        </Card>
      </Box>
    </Box>
  );
};

const mapStateToProps = (state) => ({
  user: state.user,
});

const mapDispatchToProps = (dispatch) => ({
  userLogout: () => dispatch(logout()),
});

export default connect(mapStateToProps, mapDispatchToProps)(User);
